<!-- 圈子页面 -->
<!-- 小瓜子 更新于2020/08/20 -->

<!-- 小瓜子 更新于2020/08/24 -->
<!-- 添加下拉刷新组件 -->

<!-- 小瓜子 更新于2002/08/25 -->
<!-- 解决顶部标签显示可能换行的bug -->

<!-- 小瓜子 更新于2020/08/27 -->
<!-- 优化加载时页面 -->

<!-- 小瓜子 更新于 2020/09/02 -->
<!-- 完成分页加载 -->

<!-- 小瓜子 更新于 2020/09/05 -->
<!-- 添加加载时的遮罩层 -->

<!-- 小瓜子 更新于 2020/09/09 -->
<!-- 完成被动刷新 -->
<template>
	<view>
		<!-- 加载时的页面 -->
		<view class="loading" v-if="isLoading" :style="'height:' + loadingHeight + 'px;width: 100%;'">
			<text :style="'display: block; width: 100%; height: 100%; line-height: ' + loadingHeight + 'px; text-align: center; color:#999'">加载中...</text>
		</view>
		<ErrorPage v-if='err' @reloadPage='reloadPage'></ErrorPage>
		<!-- 加载完后显示的页面 -->
		<view class="community" v-if="!isLoading">
			<!-- 用来将页面整体向下顶，给屏幕状态栏留出空间 -->
			<view class="status_bar"></view>
			<!-- 自定义导航栏(navigationbar) -->
			<view class="nav">
				<view :class="activeSwiper == 0 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="0"><text>我关注的</text></view>
				<view :class="activeSwiper == 1 ? 'listTitle_active' : 'listTitle'" @tap="swichTab" :data-index="1"><text>所有圈子</text></view>
				<navigator hover-class="none" class="creat" url="../CreatCommunity/CreatCommunity"><text class="inxupt inxupttubiao36"></text></navigator>
			</view>
			<!-- 选择排序方式 -->
			<view class="sorting">
				<text class="inxupt inxupttubiao2" @tap="swichMode" style="font-size: 24rpx;">{{sortingMode ? '按时间' : '按热度'}}</text>
			</view>
			<!-- 页面主体内容，使用swiper，实现左右滑动翻页 -->
			<swiper 
				:style="'height:' + swiperItemHeight + 'px;'" 
				@change="swiperChange" 
				:current="activeSwiper" >
				<swiper-item>
					<view :class="activeSwiper == 0 ? 'page page_active' : 'page'">
						<CommunitySummary v-for="(item,index) in SummaryList[0]" :key="index" :datas="item"></CommunitySummary>
						<UniLoadMore :status="status" color="#7F7F7F" :contentText="contentText"></UniLoadMore>
					</view>
				</swiper-item>
				<swiper-item>
					<view :class="activeSwiper == 1 ? 'page page_active' : 'page'">
						<CommunitySummary v-for="(item,index) in SummaryList[1]" :key="index" :datas="item"></CommunitySummary>
						<UniLoadMore :status="status" color="#7F7F7F" :contentText="contentText"></UniLoadMore>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import CommunitySummary from "../../components/summary/CommunitySummary.vue"
	import UniLoadMore from "../../components/plugins/uni-load-more.vue"
	import { _ajax } from "../../in-xupt-functions.js"
	import ErrorPage from "../../components/ErrorPage.vue"
	export default {
		components: {
			CommunitySummary,
			UniLoadMore,
			ErrorPage
		},
		data() {
			return {
				loadingHeight: 0, // 遮罩层高度
				isLoading: true, // 是否处于加载状态
				activeSwiper: 0, // 判断是哪一栏被显示（我关注的/所有圈子）
				swiperItemHeight: 0, // swiper容器的高度
				sortingMode: 0, //  排序方式
				SummaryList: [],
				status: "more", // more为加载前，loading为加载中，noMore为没有更多
				contentText: {
					contentdown: "下拉翻找更多东西~", // loading前的文字显示
					contentrefresh: "正在翻找~~", // loading中的显示
					contentnomore: "没有东西啦！" // 没有更多的显示
				},
				pageNum: 1,
				noMore: false,
				err: false,
			}
		},
		methods: {
			reloadPage: function () {
				this.err = false;
				this.isLoading = true;
				this.initData()
			},
			swichMode: function () {
				this.sortingMode = !this.sortingMode
			},
			swichTab: function (e) {
				this.activeSwiper = e.currentTarget.dataset.index
			},
			// 当滑动swiper或者点击导航栏上的选择项目时，重新获取swiper高度
			swiperChange: function (data) {
				this.activeSwiper = data.detail.current;
				this.getheight(200);
			},
			// 更新当前swiper高度
			getheight: function(time) {
				setTimeout(() => {
					// 获取当前swiper-item的高度
					let query = uni.createSelectorQuery();
					let page_active = query.select(".page_active");
					page_active.fields({
						size: true
					}, data => {
						// 获取当前设备的高度，取swiper高度为设备高度和swiper-item高度的最大值 （这个方法有bug）
						uni.getSystemInfo({
							success: (data2) => {
								if (data.height <= data2.windowHeight) {
									this.status = 'noMore'
								}
								this.swiperItemHeight = Math.max(data2.windowHeight - 80, data.height);
							}
						})
						// 将swiper的高度同步
						// this.swiperItemHeight = data.height + 20;
						// console.log(this.swiperItemHeight)
					}).exec();
				},time)
			},
			loadMore: function() {
				this.status = "loading";
				this.pageNum++;
				_ajax({
					url: '/circles' + '?pageNum=' + this.pageNum,
					method: 'GET'
				})
				.then(res => {
					// console.log(res)
					if(res.data.data.nextPage == 0) {
						this.status = 'nomore'
						this.noMore = true
					}else {
						this.status = 'more'
					}
					this.SummaryList[1].push(...res.data.data.list)
					this.getheight(500)
				})
				.catch(err => {
					this.pageNum--;
				})
			},
			// 初次请求后台数据调用的函数
			initData(){
				// 加载中弹框
				uni.showLoading({
					title:'正在加载',
					mask: true
				})
				let _this = this
				// 请求用户关注的圈子列表
				_ajax({
					url: '/user/' + _this.userId + '/circles',
					method: 'GET'
				})
				.then(res => {
					_this.isLoading = false;
					_this.SummaryList[0] = res.data.data
					_this.getheight(200)
					// 请求所有圈子列表
					return _ajax({
						url: '/circles' + '?pageNum=' + this.pageNum,
						method: 'GET'
					})
				})
				.then(res => {
					_this.isLoading = false;
					_this.SummaryList[1] = res.data.data.list;
					_this.getheight(200); 
					uni.hideLoading();
					_this.err = false;
				})
				.catch(err => {
					// 请求失败情况下
					this.isLoading = false;
					this.err = true;
				})
			}
		},
		onReachBottom: function() {
			// 如果还有更多数据，则执行加载更多
			if(this.activeSwiper == 1 && !this.noMore) {
				this.status = 'more';
				this.loadMore()
			}
		},
		onLoad: function(){	
			// 得到屏幕高度，并将这个值设置为加载遮罩层的高度
			uni.getSystemInfo({
				success: (data) => {
					this.loadingHeight = data.windowHeight;
				}
			})
			// 得到userid
			this.userId = uni.getStorageSync('userId')
			
			// 初始化页面数据
			this.initData();
		},
		onHide() {
			// setTimeout(() => {
			// 	if(!uni.isPriview) {
			// 		this.loadingHeight = 0;
			// 		this.isLoading = true;
			// 		this.swiperItemHeight = 0;
			// 		this.sortingMode = 0;
			// 		this.SummaryList = [];
			// 		this.status = 'more';
			// 		this.pageNum = 1;
			// 		this.noMore = false;
			// 		this.err = false
			// 	}
			// },20)
		}
	}
</script>

<style lang="less">
	// --status-bar-height为设备状态栏高度
	@statusHeight: var(--status-bar-height);
	.inxupttubiao36::before {
		font-weight: 800;
		color: #FFFFFF;
		font-size: 36rpx;
	}
	.community {
		background-color: @g-background;
		.status_bar {
			height: @statusHeight;
			width: 100%;
			background-color: #FFFFFF;
			position: fixed;
			top: 0rpx;
			z-index: 2;
		}
		.nav {
			display: flex;
			align-items: center;
			padding-left: 150rpx;
			position: fixed;
			top: @statusHeight;
			height: 80rpx;
			width: 100%;
			background-color: #FFFFFF;
			font-size: 32rpx;
			color: @g-gray;
			z-index: 2;
			.listTitle,
			.listTitle_active {
				display: inline-block;
				margin-top: 20rpx;
				line-height: 60rpx;
				// 解决顶部标签显示可能换行的bug
				width: auto;
				margin: 20rpx 50rpx 0 50rpx;
				text-align: center;
			}
			.listTitle_active {
				// line-height: 60rpx;
				color: #000;
				font-weight: 800;
				border-bottom: 4rpx solid @g-pink;
			}
			.creat {
				margin-left: 50rpx;
				margin-top: 20rpx;
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 10rpx;
				background-color: @g-pink;
			}
		}
		.sorting {
			margin-top: calc(@statusHeight + 80rpx);
			padding-right: 20rpx;
			margin-bottom: -10rpx;
			text-align: right;
		}
		swiper {
			color: #000;
			z-index: 0;
		}
		.page {
			width: 100%;
		}
		.bottom_box {
			height: 80px;
		}
	}
</style>
